<template>
	<el-row type="flex" justify="center">
		<el-col>
			<el-input v-model="input" placeholder="请输入查询关键字" clearable @input="searchChange" @clear="clearSearch"></el-input>
		</el-col>
	</el-row>
	<el-table :data="explore" height="70vh" style="width: 100%" border v-loading="loading">
		<el-table-column prop="星球" label="星球" column-key="星球" :filters="filters" :filter-method="filterHandler" :resizable="false" fixed/>
		<el-table-column prop="地点" label="地点" :resizable="false" />
		<!-- <el-table-column prop="等级" label="等级" :resizable="false" /> -->
		<el-table-column prop="地区生物" label="地区生物" :resizable="false" />
		<el-table-column prop="掉落" label="掉落" :resizable="false" />
		<el-table-column label="抓捕道具" align="center">
			<el-table-column prop="抓捕道具一" label="抓捕道具一" :resizable="false" />
			<el-table-column prop="抓捕道具二" label="抓捕道具二" :resizable="false" />
		</el-table-column>
		<!-- <el-table-column prop="探索时间" label="探索时间" :resizable="false" /> -->
		<!-- <el-table-column v-for="(col,key) in cols" :key="key" :prop="col.prop" :label="col.prop" :resizable="false" /> -->
	</el-table>
</template>

<script>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';

	export default {
		components: {},
		setup() {
			const datas = reactive({
				"input": null,
				"explore": null,
				"explore_bak": null,
				"loading": true,
				"cols": [{
					"prop": "地点"
				}, {
					"prop": "等级"
				}, {
					"prop": "地区生物"
				}, {
					"prop": "掉落"
				}, {
					"prop": "抓捕道具一"
				}, {
					"prop": "抓捕道具二"
				}, {
					"prop": "探索时间"
				}],
				"filters": [{
					text: "冒险星",
					value: "冒险星"
				}, {
					text: "美食星",
					value: "美食星"
				}, {
					text: "博物馆星",
					value: "博物馆星"
				}, {
					text: "悬疑星",
					value: "悬疑星"
				}]
			});
			const {
				proxy
			} = getCurrentInstance();
			proxy.$axios.get("./explore.json").then(
				res => {
					datas.explore = res.data;
					datas.explore_bak = res.data;
					datas.loading = false;
				}
			);
			const searchChange = () => {
				if (datas.input == "") {
					return clearSearch();
				}
				datas.loading = true;
				datas.explore = datas.explore.filter(i => {
					let Key = Object.values(i).toString().indexOf(datas.input);
					if (Key >= 0) {
						return i;
					}
				})
				datas.loading = false;
			};
			const clearSearch = () => {
				datas.loading = true;
				datas.explore = datas.explore_bak;
				datas.loading = false;
			};
			const filterHandler = (value, row, column) => {
				return row[column.columnKey] === value;
			};
			return {
				...toRefs(datas),
				searchChange,
				clearSearch,
				filterHandler
			};
		}
	}
</script>

<style>
</style>
